<template>
	<view class="container">
		<view class="content">
			<view class="book-info" style="margin-top: 2%;">
				<view class="book-info-photo">
					<view v-if="bookInfo.photo == null"
						style="width: 100%; height:100%;display: flex;justify-content: center;flex-direction: column;background-color: lightgrey;font-size: 14px;align-items: center;">
						暂无图片</view>
					<image v-if="bookInfo.photo != null" style="width: 100%; height: 100%" :src="bookInfo.photo" mode=""
						@click="clickPhoto"></image>
				</view>
				<view class="book-info-item">
					<text style="font-weight: bold; margin-top: 5%">{{bookInfo.name}}</text>
					<text style="font-size: 12px; margin-top: 5%">{{bookInfo.author}}</text>
				</view>
				<view style="margin-top: 22%; margin-left: 10%">
					<u-button v-if="bookInfo.isCollection == '0'" icon="star" size="small" type="primary" shape="circle"
						text="收藏" :plain="true" :hairline="true" color="#BEBEBE" @click="handleCollection()"></u-button>
					<u-button v-if="bookInfo.isCollection == '1' " icon="star-fill" size="small" type="primary"
						shape="circle" text="已收藏" :plain="true" :hairline="true" color="#BEBEBE"
						@click="handleCancelCollection()"></u-button>
				</view>
			</view>
			<view class="brief0-introduction">
				<text style="font-weight: bold; margin-left: 5%">简介</text>
			</view>
			<view style="background-color: #ffffff">
				<u-read-more>
					<rich-text style="font-size: 13px" :nodes="bookInfo.briefIntroduction"></rich-text>
				</u-read-more>
			</view>
			<view class="brief0-introduction">
				<text style="font-weight: bold; margin-left: 5%">出版信息</text>
			</view>
			<view style="width: 100%; height: 16%; background-color: #ffffff; display: flex">
				<view style="width: 22%; height: 100%; margin-left: 5%; display: flex; flex-direction: column">
					<text style="font-size: 13px; color: darkgrey">出版社</text>
					<text style="font-size: 13px; color: darkgrey">出版时间</text>
					<text style="font-size: 13px; color: darkgrey">分类</text>
					<text style="font-size: 13px; color: darkgrey">条码号</text>
					<text style="font-size: 13px; color: darkgrey">书号</text>
				</view>
				<view style="width: 78%; height: 100%; margin-left: 5%; display: flex; flex-direction: column">
					<text style="font-size: 13px">{{bookInfo.press}}</text>
					<text style="font-size: 13px">{{bookInfo.publishDate}}</text>
					<text style="font-size: 13px">{{bookInfo.themeTmp}}</text>
					<text style="font-size: 13px">{{bookInfo.barcodeNumber}}</text>
					<text style="font-size: 13px">{{bookInfo.bookNumber}}</text>
				</view>
			</view>
			<view class="brief0-introduction">
				<text style="font-weight: bold; margin-left: 5%">图书详情</text>
			</view>
			<view
				style="width: 100%; background-color: #ffffff; display: flex;justify-content: center; align-items: center;">
				<scroll-view scroll-y="true">
					<image :src="bookInfo.photoDetail" mode="widthFix" :style="{ width: '750rpx' }" @click="clickImg">
					</image>
				</scroll-view>
				<text v-if="bookInfo.photoDetail == null">暂无详情</text>
			</view>
			<view class="brief0-introduction">
				<text style="font-weight: bold; margin-left: 5%">猜你喜欢</text>
			</view>
			<view style="width: 100%; height: 28%; background-color: #ffffff; display: flex; ">
				<view class="like-book" v-for="(book, index) in list" :key="book.id">
					<image v-if="book.photo != null" style="width: 100%; height: 75%" :src="book.photo"
						@click="bookDetail1(book.id)"></image>
					<view v-if="book.photo == null"
						style="width: 100%; height: 70%;display: flex;justify-content: center;flex-direction: column;background-color: lightgrey;font-size: 18px;align-items: center;"
						@click="bookDetail1(book.id)">
						暂无图片</view>
					<text class="like-book-name">{{ book.name }}</text>
					<text class="like-book-author">{{ book.author }}</text>
				</view>
			</view>
			<view style="background-color: #ffffff; width: 100%; height: 7%; margin-bottom: 20%;margin-top: 8%;">
				<view style="width: 90%; margin-left: 4%">
					<u-button iconColor="#FFFFFF" color="#008080" icon="reload" shape="circle" text="换一批"
						:loading="likeLoading" loadingText="加载中" @click="likeList"></u-button>
				</view>
			</view>
		</view>
		<view class="footer-button">
			<view style="width: 10%">
				<u-icon name="home" label="首页" labelPos="bottom" size="28"
					@click="handleSwitchPath('/pages/home/index')"></u-icon>
			</view>
			<view style="width: 10%; margin-left: 5%">
				<u-icon name="/static/images/tabbar/bookshelf.png" label="书架" labelPos="bottom" size="28"
					@click="handleSwitchPath('/pages/bookshelf/index')"></u-icon>
			</view>
			<view style="width: 200px; margin-left: 20%">
				<u-button v-if="bookInfo.isBookShelf == '0' && bookInfo.isBorrow == 0" type="primary" shape="circle"
					text="加入书架" @click="handleBookShelf()"></u-button>
				<u-button v-if="bookInfo.isBookShelf == '1'" type="primary" shape="circle" color="#FF3030" text="移除书架"
					@click="handleremoveBookShelf()"></u-button>
				<u-button v-if="bookInfo.isBorrow == 1" type="primary" shape="circle" color="grey"
					text="已借阅"></u-button>
			</view>
		</view>
		<view>
			<u-modal content="是否收藏该图书？" :show="show3" showCancelButton closeOnClickOverlay @confirm="confirmCollection"
				@cancel="cancelShow()" @close="cancelShow()"></u-modal>
		</view>
		<view>
			<u-modal content="是否取消收藏该图书？" :show="show4" showCancelButton closeOnClickOverlay
				@confirm="confirmCancelCollection" @cancel="cancelShow4()" @close="cancelShow4()"></u-modal>
		</view>
		<view>
			<u-modal content="是否将该图书加入书架？" :show="show5" showCancelButton closeOnClickOverlay
				@confirm="confirmBookShelf" @cancel="cancelShow5()" @close="cancelShow5()"></u-modal>
		</view>
		<view>
			<u-modal content="是否将该图书从书架中移除？" :show="show6" showCancelButton closeOnClickOverlay
				@confirm="confirmremoveBookShelf" @cancel="cancelShow6()" @close="cancelShow6()"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		getBookDetail,
		getLikeList,
		bookCollection,
		bookCancelCollection,
		joinBookShelf,
		removeBookShelf
	} from '@/api/book'
	import config from '@/config'
	export default {
		data() {
			return {
				likeLoading: false,
				show6: false,
				show5: false,
				show4: false,
				show3: false,
				bookInfo: {
					isCollection: '0',
					isBookShelf: '0'
				},
				bookId: '',
				list: [],
			};
		},
		onLoad(options) {
			this.bookId = options.bookId;
			this.bookDetail(this.bookId)
		},
		methods: {
			async bookDetail(bookId) {
				console.log('dsfsdf')
				const res = await getBookDetail(bookId);
				if (res.code == 200) {
					this.bookInfo = res.data
					if (this.bookInfo.photo != null) {
						this.bookInfo.photo = config.baseUrl + this.bookInfo.photo
					}
					if (this.bookInfo.photoDetail != null) {
						this.bookInfo.photoDetail = config.baseUrl + this.bookInfo.photoDetail
						console.log(this.bookInfo.photoDetail)
					}
					this.likeList();
				}
			},
			async bookDetail1(bookId) {
				uni.navigateTo({
					url: `/book/book-detail/index?bookId=${bookId}`
				});
			},
			async likeList() {
				this.likeLoading = true
				const res = await getLikeList(this.bookInfo.theme)
				if (res.code == 200) {
					this.list = res.rows
					this.list.forEach(item => {
						if (item.photo != null) {
							item.photo = config.baseUrl + item.photo
						}
					})
				}
				this.likeLoading = false
			},
			handleSwitchPath(path) {
				uni.reLaunch({
					url: path // 单个属性无需逗号
				});
			},
			clickImg() {
				uni.previewImage({
					urls: [this.bookInfo.photoDetail], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '',
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			clickPhoto() {
				uni.previewImage({
					urls: [this.bookInfo.photo], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '',
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			handleCollection() {
				this.show3 = true
			},
			handleCancelCollection() {
				this.show4 = true
			},
			cancelShow() {
				this.show3 = false
			},
			cancelShow4() {
				this.show4 = false
			},
			cancelShow5() {
				this.show5 = false
			},
			cancelShow6() {
				this.show6 = false
			},
			handleBookShelf() {
				this.show5 = true
			},
			handleremoveBookShelf() {
				this.show6 = true
			},
			async confirmCollection() {
				const res = await bookCollection("2", this.bookId);
				if (res.code == 200) {
					uni.showToast({
						title: "收藏成功"
					})
					this.show3 = false
					this.bookInfo.isCollection = '1'
				}
			},
			async confirmCancelCollection() {
				const res = await bookCancelCollection("2", this.bookId);
				if (res.code == 200) {
					uni.showToast({
						title: "取消成功"
					})
					this.show4 = false
					this.bookInfo.isCollection = '0'
				}
			},
			async confirmremoveBookShelf() {
				const res = await removeBookShelf("2", this.bookId);
				if (res.code == 200) {
					uni.showToast({
						title: "移除成功"
					})
					this.show6 = false
					this.bookInfo.isBookShelf = '0'
				}
			},
			async confirmBookShelf() {
				const res = await joinBookShelf("2", this.bookId, 0);
				if (res.code == 200) {
					uni.showToast({
						title: "加入成功"
					})
					this.show5 = false
					this.bookInfo.isBookShelf = '1'
				}
			}
		}

	};
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		height: 100vh;
		overflow: hidden;
		background-color: #f5f5f5;
	}

	.content {
		width: 100%;
		// height: calc(100vh - 120px);
		/* 根据实际导航栏高度调整 */
		overflow-y: auto;
		/* 允许内容滚动 */
	}

	.book-info {
		height: 130px;
		width: 100%;
		display: flex;
		background-color: #ffffff;
	}

	.book-info-photo {
		width: 23%;
		height: 95%;
		margin-left: 3%;
		margin-top: 1%;
	}

	.book-info-item {
		width: 40%;
		height: 100%;
		margin-left: 3%;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.brief0-introduction {
		width: 100%;
		height: 7%;
		background-color: #ffffff;
		margin-top: 3%;
		display: flex;
		// justify-content: center; /* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.like-book {
		width: 13vh;
		height: 26vh;
		margin-left: 5.5%;
		// margin-top: 3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		margin-bottom: 4%;
	}

	.like-book-name {
		font-weight: bold;
		font-size: 14px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}

	.like-book-author {
		font-size: 12px;
		// margin-top: 5%;
		color: darkgrey;
		overflow: hidden;
		max-width: 100px;
	}

	.footer-button {
		display: flex;
		// z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		/* 按钮背景色 */
		padding: 10px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}
</style>